<template>
    <div style="">

        <DetailTop></DetailTop>
        <div class="animated fadeInUp" style="width: 1200px;margin: 0 auto;border: 1px solid #EBEBEB;border-radius: 5px">
            <div style="display: flex;justify-content: space-between">
                <div style="font-size: 20px;display: flex;align-items: center">俄罗斯莫斯科圣彼得堡9-14日游</div>
                <div style="color: #5CC7D4;padding: 10px;border-bottom: 1px solid #5CC7D4">详细信息</div>
            </div>
            <!--            600 400-->
            <!--            图片开始-->
            <div style="display: flex;justify-content: center;">
               <div style="width: 600px">
                   <el-carousel
                           :interval="2000"
                           style="width: 100%" height="460px" indicator-position="outside">
                       <el-carousel-item
                               :indicator-position="none"
                              >
                           <el-image
                                   class="story-img"
                                   :src="require('@/assets/img/2.jpg')"
                                   style="width: 600px;height: 400px">

                           </el-image>

                       </el-carousel-item>
                       <el-carousel-item
                               :indicator-position="none"
                       >

                           <el-image
                                   class="story-img"
                                   :src="require('@/assets/img/3.jpg')"
                                   style="width: 600px;height: 400px">

                           </el-image>
                       </el-carousel-item>
                   </el-carousel>
               </div>
<!--                <el-image-->
<!--                        class="story-img"-->
<!--                        :src="require('@/assets/img/2.jpg')"-->
<!--                        style="width: 600px;height: 400px">-->

<!--                </el-image>-->
            </div>
            <!--            图片结束-->
            <br>
            <br>
            <br>
            <br>
            <!--            详情信息-->
            <div style="border-bottom: 1px solid #EBEBEB;padding-bottom: 30px">
                演示数据演示数据演示数，演示数据演示，演示数据演示数据演示数★（演40演示）、演示数据演示数★（演30演示），演示数据演示数据演示数据演示。演示数据演示数据演示数据演示数：演示数据演示、演示数据（12演示）、演示数据演、演示数据演示。
            </div>
            <div style="border-bottom: 1px solid #EBEBEB;padding-bottom: 30px;padding-top: 30px">
                演示数据演示数据演
            </div>
            <div style="border-bottom: 1px solid #EBEBEB;padding-bottom: 30px;padding-top: 30px">
                演示数据演示数据演
            </div>
            <div style="display: flex;justify-content: space-around">
                <div style="width: 500px">出游天数： 十四日游</div>
                <div style="width: 300px;text-align: left">目的地： 北欧</div>
            </div>
            <div style="display: flex;justify-content: center">
                <div class="dinggou"
                     style="color: #FF461C;border-radius: 6px;padding: 2px 10px;width: 70px;margin-top: 50px;margin-left: 20px;border: 1px solid #FF461C">
                    立即预购
                </div>
            </div>
        </div>
<!--        底部-->
        <br>
        <br>
        <br>
        <Foot></Foot>
    </div>
</template>

<script>
    import DetailTop from "../components/top/DetailTop";
    import Foot from "../components/bottom/Foot";
    export default {
        components: {
            DetailTop,
            Foot
        }
        ,
        name: "Detail"
    }
</script>

<style scoped>
    .dinggou:hover {

        color: #ffffff !important;
        background-color: #FF461B;
    }

    .dinggou {
        cursor: pointer;
        transition: all 0.5s;
    }
</style>